<template>
  <div class="file-uploader">

    <el-row v-if="!linkUrl">
      <el-upload
        class="uploader"
        :action="action"
        :show-file-list="showFileList"
        :accept="accept"
        :multiple="multiple"
        :limit="limit"
        :on-exceed="onExceed"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :http-request="uploads"
      >
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="form-item-tip" style="line-height: 35px">上传歌词支持.lrc格式</div>
    </el-row>

    <div v-else>
      <p v-if="percentage!==0">
        <el-progress :percentage="percentage"></el-progress>
      </p>
      <el-row>
        <el-button size="mini" @click="handleReUpload" type="primary">重新上传</el-button>
      </el-row>
    </div>
  </div>
</template>

<!--图片上传组件-->
<script>
    import qnUpload from '@/utils/qiniu'
    export default {
        name: 'FileUpload',
        data() {
            return {
                dialogVisible: false,
                percentage: 0
            }
        },
        methods: {
            handleReUpload() {
                this.percentage = 0
                this.handleSuccess('')
            },
            handleSuccess(url) {
                this.$emit('upload-callback', url)
            },
            progress(res) {
              this.percentage = Math.ceil(res.percent)
            },
            uploads(file) {
              const upload = {
                mediaType:'lyric',
                value:file,
                uploadTo:this.uploadFrom,
                uploadType:'normal',
                callback:{
                  success:this.handleSuccess,
                  progress:this.progress
                }
              }
              qnUpload.upload(upload)
            }
        },
        props: {
            linkUrl: String,
            action: {
                type: String,
                default: ''
            },
            accept: {
                type: String,
                default: '.lrc'
            },
            showFileList: {
                type: Boolean,
                default: false
            },
            multiple: {
                type: Boolean,
                default: false
            },
            limit: {
                type: Number,
                default: 1
            },
            onExceed: {
                type: Function,
                default: function (files, fileList) {
                    this.$message.warning('已达到最大上传数量')
                }
            },
            handleAvatarSuccess: Function,
            beforeAvatarUpload: {
                type: Function,
                default: function (file) {
                    const isLt5M = file.size / 1024 / 1024 < 5
                    if (!isLt5M) {
                        this.$message.error('上传图片大小不能超过5MB!')
                    }
                    return isLt5M
                }
            },
            upload: Function,
            uploadFrom: {
                type: String,
                default: 'course'
            }
        }
    }
</script>

<style lang="scss">
  .file-uploader {
    width: 249px;

    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .el-upload:hover {
      border-color: #409EFF;
    }

    .preview-btn {
      margin-top: 10px;
      margin-left: 30px;
    }

    .avatar-uploader-icon {
      font-pageSize: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }
  }
</style>
